<template>
    <div>
        <h3>具有数据校验功能的表单组件——Form</h3>
         
        <i-form ref="myForm" :model="formValidate" :rules="ruleValidate">
              
            <i-form-item label="用户名" prop="name">
                   
                <i-input v-model="formValidate.name"></i-input>
                  
            </i-form-item>
              
            <i-form-item label="邮箱" prop="mail">
                   
                <i-input v-model="formValidate.mail"></i-input>
                  
            </i-form-item>

            <i-form-item label="多选框" prop="checkList">
                <i-checkbox-group v-model="formValidate.checkList">
                    <i-checkbox label="点我1"></i-checkbox>
                    <i-checkbox label="点我2"></i-checkbox>
                    <i-checkbox label="点我3"></i-checkbox>
                    <i-checkbox label="点我4"></i-checkbox>
                </i-checkbox-group>
            </i-form-item>

            <i-form-item label="单选框" prop="radio">
                <i-radio-group v-model="formValidate.radio">
                    <i-radio label="l1"></i-radio>
                    <i-radio label="l2"></i-radio>
                    <i-radio label="l3"></i-radio>
                </i-radio-group>
            </i-form-item>
             
        </i-form>
         
        <button @click="handleSubmit">提交</button>
         
        <button @click="handleReset">重置</button>
    </div>
</template>

<script>
  import iFormItem from '../components/form/form-item.vue'
  import iForm from '../components/form/form.vue'
  import iInput from '../components/input/input.vue'
  import iCheckbox from '../components/checkbox/checkbox.vue'
  import iCheckboxGroup from '../components/checkbox/checkbox-group.vue'
  import iRadio from '../components/radio/radio.vue'
  import iRadioGroup from '../components/radio/radio-group.vue'

  export default {
    components: { iForm, iFormItem, iInput, iCheckbox, iCheckboxGroup, iRadio, iRadioGroup },
    name: 'myForm',
    data() {
      return {
        checkList: [],
        formValidate: {
          name: '',
          mail: '',
          checkList: ['点我1'],
          radio: ''
        },
        ruleValidate: {
          name: [
            { required: true, message: '用户名不能为空', trigger: 'blur' }
          ],
          checkList: [
            { type: 'array', required: true, message: '至少输入一项', trigger: 'change' }
          ],
          mail: [
            { required: true, message: '邮箱不能为空', trigger: 'blur' },
            { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
          ],
        }
      }
    },
    methods: {
      handleSubmit() {
        this.$refs.myForm.validate(valid => {
          if (valid) {
            alert('可以提交')
          } else {
            alert('有错误，请重试')
          }
        })
      },
      handleReset() {
        this.$refs.myForm.resetFields()
      }
    },
    watch: {
      checkList(val) {
        console.log(val)
      }
    }
  }
</script>
